<template>
  <div class="Echarts">
    <div ref="pieEcharts" class="pieEcharts" style="width:400px;height:300px" />
    <div class="info">
      <div class="item">
        <div class="number">16</div>
        <div class="title">点位数</div>
      </div>
      <div class="item">
        <div class="number">5</div>
        <div class="title">合作商数</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var myChart = echarts.init(this.$refs.pieEcharts)
      // 指定图表的配置项和数据
      const option = {
        title: {
          subtext: '合作商点位数Top5',
          left: '50px'
        },
        grid: {
          x: 70,
          x2: 70,
          y2: 55
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['25%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '佳佳' },
              { value: 735, name: 'likede' },
              { value: 580, name: '北京合作商' },
              { value: 484, name: '天华物业' },
              { value: 300, name: '金燕龙合作商' }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>
<style lang='scss' scoped>
.Echarts{
  display: flex;
.pieEcharts{
width: 80% !important;
  height: 380px;
      margin-left: -150px;
}
.info{
  width: 20%;
  height: 230px;
  background-color: #f8f8f9 !important;
    margin-top: 40px;
    .item{
      margin-bottom: 20px;
      padding-left: 40px;
      padding-top: 20px;
    }
  .number{
        height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
  }
}
}
</style>
